 模板
<template>
  <div>
    <!-- 显示评论数量 -->
    <div style="margin-bottom: 20px; font-size: 22px; font-weight: bold">评论 {{ commentCount }}</div>
    <!-- 输入评论区域 -->
    <div style="margin-bottom: 20px">
      <el-input type="textarea" placeholder="请输入评论" v-model="content"></el-input>
      <!-- 评论按钮 -->
      <div style="text-align: right; margin-top: 5px"><el-button type="primary" @click="addComment(null)">评论</el-button></div>
    </div>

    <!-- 评论列表 -->
    <div>
      <div v-for="item in commentList" :key="item.id" style="margin-bottom: 20px">
        <!-- 一级评论-->
        <div style="display: flex; margin-bottom: 20px">
          <img :src="item.avatar" alt="" style="width: 50px; height: 50px; border-radius: 50%">
          <div style="padding-left: 15px; flex: 1">
            <div style="margin-bottom: 10px; color: #666">{{ item.userName }}</div>
            <div style="margin-bottom: 5px">{{ item.content }}</div>
            <div style="color: #666; font-size: 13px; margin-bottom: 5px;display: flex">
              <span>{{ item.time }}</span>
              <!-- 回复按钮 -->
              <span @click="handleShowReply(item)" style="margin: 0 20px; cursor: pointer"
                    :class="{'comment-active' : item.showReply}"><i class="el-icon-s-comment"></i>回复</span>
              <!-- 删除按钮 -->
              <span @click="delComment(item.id)" v-if="item.userId === user.id" style="cursor: pointer"><i class="el-icon-delete"></i>删除</span>
              <div v-if="item.children.length>0" style="margin-left: 20px">
                <i class="el-icon-chat-line-round"></i>
                <span>{{ item.children.length }}</span>
              </div>
            </div>
            <!-- 回复输入区域 -->
            <div v-if="item.showReply">
              <el-input type="textarea" placeholder="请输入回复" v-model="item.replyContent"></el-input>
              <div style="text-align: right; margin-top: 5px"><el-button type="primary" @click="addComment(item)">回复</el-button></div>
            </div>
          </div>
        </div>
        <!-- 二级评论-->
        <div v-if="item.children" style="padding-left: 65px">
          <div v-for="sub in item.children" style="display: flex; margin-bottom: 20px">
            <img :src="sub.avatar" alt="" style="width: 50px; height: 50px; border-radius: 50%">
            <div style="padding-left: 15px; flex: 1">
              <div style="margin-bottom: 10px; color: #666">{{ sub.userName }} <span v-if="sub.userName !== item.userName">回复：{{ sub.parentUserName }}</span></div>
              <div style="margin-bottom: 5px">{{ sub.content }}</div>
              <div style="color: #666; font-size: 13px; margin-bottom: 5px">
                <span>{{ sub.time }}</span>
                <!-- 删除按钮 -->
                <span @click="delComment(sub.id)" v-if="sub.userId === user.id" style="cursor: pointer;padding-left: 20px"><i class="el-icon-delete"></i>删除</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-pagination v-if="total>pageSize"
          background
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2,4]"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

 <script>export default {
   name: "CommentComponent",
   props: {
     fid: null,
     module: null,
     pageNum: {
       type: Number,
       default: 1
     },
     pageSize: {
       type: Number,
       default: 2
     },
     total: {
       type: Number,
       default: 0
     }
   },
   data() {
     return {
       user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
       commentCount: 0,
       content: '',
       commentList: []
     }
   },
   created() {
     this.loadComment()
   },
   methods: {
     // 展开或隐藏回复输入区域
     handleShowReply(comment) {
       // 点击回复按钮传入的对象的showReply属性取反
       this.$set(comment, 'showReply', !comment.showReply)
     },
     // 删除评论
     delComment(commentId) {
       this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
         this.$request.delete('/comment/deleteDeep/' + commentId).then(res => {
           if (res.code === '200') {
             this.$message.success('操作成功')
             this.loadComment()
           } else {
             this.$message.error(res.msg)
           }
         })
       }).catch(() => {
       })
     },
     // 加载评论
     loadComment() {
       this.$request.get('/comment/selectTree/' + this.fid + '/' + this.module, {
         params: {
           pageNum: this.pageNum,
           pageSize: this.pageSize
         }
       }).then(res => {
         this.commentList = res.data?.list || [];
         this.total = res.data?.total || 0
       })

       this.$request.get('/comment/selectCount/' + this.fid + '/' + this.module).then(res => {
         this.commentCount = res.data || 0
       })
     },
     // 添加评论或回复
     addComment(comment) {
       let data = { fid: this.fid, userId: this.user.id, module: this.module, content: this.content }
       if (comment) {
         if (!comment.replyContent) {
           this.$message.error('请输入回复内容')
           return;
         } else {
           data.content = comment.replyContent
           data.pid = comment.id
         }
       } else {
         if (!this.content) {
           this.$message.error('请输入评论内容')
           return;
         }
       }
       this.$request.post('/comment/add', data).then(res => {
         if (res.code === '200') {
           this.$message.success('操作成功')
           this.content = ''
           this.loadComment()
         } else {
           this.$message.error(res.msg)
         }
       })
     },
     handleCurrentChange(pageNum) {
       this.pageNum = pageNum
       this.loadComment()
     },
   }
 }
 </script>

<style scoped>

</style>
